<template>
  <div>
    <div>
      <x-header title="教务考勤" :left-options="{ showBack: false }"></x-header>
    </div>
    <div class="info" v-if="message">
      <div>登录失败，请确认您的网络是否正常</div>
      <div>或您的ticket是否有效</div>
    </div>
    <div class="footer">
      <div>深圳职业技术学院</div>
    </div>
  </div>
</template>

<script>
import { getToken, setToken } from "@/utils/auth";
import Vue from "vue";
import { ViewBox, XHeader, Toast, Group, XSwitch } from "vux";
import { ToastPlugin } from "vux";
Vue.use(ToastPlugin);
export default {
  components: {
    ViewBox,
    XHeader,
    Toast,
    Group,
    XSwitch,
  },
  data() {
    return {
      dialog: null,
      ticket: null,
      message: false,
      show1: false,
      text: "",
    };
  },
  created() { 
    this.login("ED9A8AE43F734ECCAFC7751A8B81AAB8") //调试

    // this.login(this.getUrlKey("ticket")); // 小程序/h5登录
    // this.getinitcode(); //i 深职APP登录
  },
  methods: {
    getinitcode() {
      let _this = this;
      var initCode = null;
      var appID = null;
      getinitcode().then((res) => {
        initCode = res.initCode;
        appID = res.appId;
        // 进入页面首先调起用户授权
        // 授权接口需要初始化才能调用，所以要先进行JSSDK的初始化
        // JSSDK初始化需要传入initCode，所以我们先获取initCode
        // console.log("4", initCode);
        sc.config({
          debug: false, // 是否开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来
          appId: appID, // 在统一 APP 开放平台服务器申请的 appId
          initCode: initCode,
        });
        /*
        config 信息验证后会执行 ready 方法，所有需初始化接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。
        这里我们把授权接口放到sc.ready函数中执行
        */
        // console.log("333333");
        sc.ready(function () {
          // console.log("i6");
          sc.userAuth({ appId: appID }, (res) => {
            // console.log("iiiiiiii");
            /*
            sc.userAuth会首先判断用户是否登录，若没有登录，则会主动调起登录窗口，无需在此调用 isLogin 和 login 接口
            */
            if (res.code === 0) {
              //用户同意授权
              const requestCode = res.data.requestCode;
              // console.log("requestCode", requestCode);
              _this.login(requestCode);
            } else {
              /*
              用户拒绝授权或其它失败情况
              code: -1 默认失败
              code: -10001    没有初始化JSSDK
              code: -10002    用户点击拒绝授权
              code: -10003    用户未登录
              */
              console.warning("xx",res.message);
            }
          });
        });
        sc.error((res) => {
          console.error("eeee", { res });
        });
      });
    },
    //获取url里的ticket参数方法 name == 获取的参数名
    getUrlKey(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    login(ticket) {
      // console.log("ppp");
      login(ticket)
        .then((res) => {
          console.log('login',res);
          setToken(res.token);
          this.$vux.toast.show({
            type: "success",
            text: "登录成功!",
          });
          this.getUserInfo();
        })
        .catch((error) => {
          this.$vux.toast.show({
            type: "cancel",
            text: "登录失败!",
          });
          this.message = true;
        });
    },
    getUserInfo() {
      getUserInfo()
        .then((res) => {
          if (res.code == 20000) {
            sessionStorage.setItem("user", JSON.stringify(res.data));
            setTimeout(() => {
              this.$router.replace({ path: "/index" });
              // this.$router.replace({ path: "/jwkq/xcx/index" });
              // this.$router.replace({ path: "/jwkq/isz/index" });
            }, 500);
          }
        })
        .catch((error) => {
          this.$vux.toast.show({
            type: "cancel",
            text: "获取个人信息失败!",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.info {
  margin-top: 20%;
  padding: 20%;
  text-align: center;
  line-height: 0.22rem;
  font-size: 0.12rem;
}
.footer {
  position: absolute;
  bottom: 0.8rem;
  text-align: center;
  width: 100%;
}
</style>
